<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- <link rel="stylesheet" href="css/home.css"> -->
    <link rel="stylesheet" href="t_green/tx.css">

    <style>
        * {
            margin: 0px;
            /*外边距*/
            padding: 0px;
            /*内边距*/
        }

        ul,
        li {
            list-style: none;
        }

        .but {
            z-index: 1;
            width: 560px;
            height: 40px;

            /*border:1px solid #000;*/
            margin: 15px auto 0;
            position: relative;
            /*参照物*/
        }

        .but .msg_but {
            width: 80px;
            height: 30px;
            background: #7db718;
            display: inline-block;
            /*行间块级 block块级  none隐藏 inline行间*/
            font-size: 12px;
            color: #fff;
            font-family: "微软雅黑";
            text-align: center;
            /*对齐方式*/
            line-height: 30px;
            border-radius: 3px;
            float: right;
        }

        .but .imgface {
            cursor: pointer;
            /*指针形状*/
        }

        .but .msg_but {
            cursor: pointer;
            /*指针形状*/
        }

        .but .face {
            width: 395px;
            height: 160px;
            background: #fff;
            border: 1px solid #ddd;
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px;
            display: none;
        }

        .but .face ul li {
            width: 22px;
            height: 22px;
            float: left;
            margin: 8px;
        }

        #commentMsg {
            width: 400px;
            margin: 15px auto;
        }

        #commentMsg .msgInfo {
            width: 580px;
            background: #fff;
            padding: 10px;
            margin-bottom: 10px;
        }

        #commentMsg .msgInfo dl {
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #ddd;
        }

        #commentMsg .msgInfo dl dt {
            width: 50px;
            height: 50px;
            float: left;
        }

        #commentMsg .msgInfo dl dd {
            width: 500px;
            height: 50px;
            line-height: 50px;
            font-family: "微软雅黑";
            font-size: 14px;
            float: right;
        }

        #commentMsg .msgInfo .con {
            font-size: 12px;
            line-height: 20px;
            font-family: "微软雅黑";
        }
    </style>

</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="row" style="margin-top: 2rem;">
            <div class="col-sm"></div>
            <div class="col-sm">
                <!-- 宽为50rem -->
                <div class="card" style="width: 50rem; background:rgba(252, 250, 244, 0.030);">
                    <div class="card-header-1">
                        <div class="row" style="font-family: cursive;">

                            <h4
                                style="position: absolute; left: 0.5rem; margin-top: 0.5rem; color: green; font-family:cursive;">
                                我们在一起的空间</h4>

                            <!-- 头像框 -->
                            <!-- <div class="user-info" style="background-color: aqua;">
                                
                            </div> -->

                            <div class="box" style="z-index: 1; margin-top: 3rem; margin-left: 2rem;">
                                <!-- <h2 style="color: aliceblue;"></h1> -->
                                <div class="ft_img" id="ft_img">
                                    <img src="images/www.17qq.jpg" style="width: 6rem; height: 6rem;" class="t_img" />
                                </div>
                                <div class="s_box" id="sbox" style="background-color: azure;">
                                    <div class="header">
                                        <p>设置头像</p>
                                        <span class="close" id="close">x</span>
                                    </div>
                                    <hr width="80%" color="#e0e0eb" />
                                    <div id="t_img">
                                        <img src="images/COS 滑稽.png" />
                                        <img src="images/EMOJI-01.png" />
                                        <img src="images/EMOJI-05.png" />
                                        <img src="images/emoji-1.png" />
                                        <img src="images/emoji-10.png" />
                                        <img src="images/EMOJI-100.png" />
                                        <img src="images/emoji-12.png" />
                                        <img src="images/emoji-14.png" />
                                        <img src="images/emoji-15.png" />
                                        <img src="images/EMOJI-16.png" />
                                        <img src="images/emoji-17.png" />
                                        <img src="images/emoji-18.png" />
                                        <img src="images/emoji-2.png" />
                                        <img src="images/emoji-20.png" />
                                        <img src="images/EMOJI-21.png" />
                                    </div>
                                    <hr width="80%" color="#e0e0eb" />
                                    <div class="bt_box">
                                        <input type="file" name="file0" id="file0" accept="image/*" />
                                        <a class="gb" href="javascript:" id="hide">关闭</a>
                                        <a class="queren" href="javascript:" id="but">保存头像</a>
                                    </div>
                                </div>
                            </div>

                            <!-- 用户名样式 -->
                            <div class="col-sm-7 d-flex justify-content">
                                <p>{{username}}</p>
                            </div>
                            <!-- 按钮组件 -->
                            <div class="col-sm-5 d-flex justify-content-end ">
                                <button type="button" class="btn btn-secondary btn-sm shadow" data-toggle="modal"
                                    data-target="#closeAccount">注销</button>
                            </div>
                            <!-- 按钮组件 -->
                            <div class="col-sm-6 d-flex justify-content-start">
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm">

            </div>
        </div>

        <!-- 说说框 -->
        <div class="row" style="font-family: cursive;">
            <div class="col-sm">

            </div>
            <div class="col-sm" id="saysaymsg">
                {% for msg in msgs %}
                <div class="card border-primary shadow" style="width: 50rem; background:rgba(252, 250, 244, 0.030);">
                    <div class="card-header">
                        <div class="row">
                            <!-- 头像框 -->
                            <div class="user-info">
                                <a class="user-home" type="file" onclick="miy_photo()">
                                    <img class="user-avatar-1" src="images/www.17qq.jpg" alt="您的头像">
                                </a>
                            </div>
                            <div class="col-sm-10">{{msg.content}}</div>

                            <!-- 在html代码中写入类型为button类型按钮，并给一个id名为praise -->
                            <input class="give" type="button" id="praise" value="赞(0)">

                            <div class="col-sm-2">
                                <button type="button" style="margin-left: 1rem; height: 2rem;"
                                    class="btn btn-success btn-sm" data-toggle="modal" data-target="#comment"
                                    onclick="sayComment('{{msg.id}}')">吐槽一下</button>
                            </div>
                        </div>
                    </div>

                    <!-- 评论框 -->
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="{{msg.id}}">
                            {% for comment in msg.comments %}
                            <li class="list-group-item" style="background:rgba(252, 250, 244, 0.030)">
                                <blockquote class="blockquote mb-0">
                                    <p>{{comment.content}}</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">{{comment.comUserName}}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                    </footer>
                                    <!-- <input class="give" type="button" id="praise" value="赞(0)"> -->
                                </blockquote>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="col-sm">

            </div>
        </div>
    </div>

    <!-- 注销  -->
    <div class="modal fade" id="closeAccount" data-backdrop="static" data-keyboard="false" tabindex="-1"
        style="font-family: cursive; height: 40rem;" aria-labelledby="closeAccountLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="closeAccountLabel">注销</h3>
                </div>
                <div class="modal-body center" style=" margin-top: 1rem; color:crimson;">
                    <div class="form-group" style="text-align: center;">
                        <label for="exampleFormControlTextarea1">
                            <h4>是否注销当前账户!</h4>
                        </label>
                    </div>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" style="width: 6rem;" onclick="logout()">确认注销</button>
                    <button type="button" class="btn btn-success" style="width: 6rem;" data-dismiss="modal">再想想</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 发表说说  -->
    <div class="modal fade" id="saysomething" tabindex="-1" style="font-family: cursive;"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="sayMsg">说点儿什么吧...</label>
                            <textarea class="form-control" id="sayMsg" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" style="width: 6rem;"
                        data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" style="width: 6rem;" data-dismiss="modal"
                        onclick="saysay()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 吐槽一下 -->
    <!-- <div class="modal fade" id="comment" tabindex="-1" style="font-family: cursive;" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="width: 6rem;" id="exampleModalLabel">吐槽一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">吐槽点儿什么吧...</label>
                            <textarea class="form-control" id="commentMsg" rows="3"></textarea>
                        </div>
                    </form>


                    <div class="but">
                        <img src="../images/受虐滑稽.png" style="width: 30px; height: 30px;" class="imgface" />
                        -- <span class="msg_but">发表</span> -
                        <button type="button" class="btn btn-secondary" style="margin-left: 14.2rem; width: 6rem;" data-dismiss="modal">取消</button>
                        <button type="button" class="msg_but btn-success" style="width: 6rem;" data-dismiss="modal" onclick="saysay()">发表</button>
                        <div class="face">
                            <ul>
                                <li><img src="../images/COS 滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/emoji-6.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/EMOJI-61.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/emoji-7.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/EMOJI-75.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/emoji-8.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/EMOJI-89.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="../images/emoji-9.png" alt="" style="width: 30px; height: 30px;"></li>
                            </ul>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div> -->



    <!-- 吐槽一下 -->
    <!-- <div class="modal fade" id="comment" tabindex="-1" style="font-family: cursive;" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">吐槽点儿什么吧...</label>
                            <textarea class="form-control" id="commentMsg" rows="3"></textarea>
                        </div>
                    </form>

                    fgf 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" style="width: 6rem;"
                        data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" style="width: 6rem;" data-dismiss="modal"
                        onclick="comment()">吐槽</button>
                </div>
            </div>
        </div>
    </div> -->

    <div class="modal fade" id="comment" tabindex="-1" style="font-family: cursive;" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group" style="z-index: 1;">
                            <!-- <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="commentMsg"> -->
                            <label for="exampleFormControlTextarea1">吐槽点儿什么吧...</label>
                            <textarea class="form-control" id="commentMsg" rows="3"></textarea>
                        </div>
                    </form>

                    fgf

                    <div class="but">
                        <img src="images/受虐滑稽.png" style="width: 30px; height: 30px; z-index: 1;" class="imgface" />
                        <!-- <span class="msg_but">发表</span> -->
                        <div class="face" style="z-index: 1;">
                            <ul>
                                <!-- <li><img src="images/bba_0001.png" title="[织]"></li> -->
                                <li><img src="images/COS 滑稽.png" title="[织] alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="images/qq狗头.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="images/傲娇.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="images/受虐滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="images/墨镜滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
                                <li><img src="images/斗鸡眼-滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
                            </ul>
                        </div>
                    </div>
                    <!-- <div class="msgBox" style="z-index: 1;">

                    </div> -->
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" style="width: 6rem;"
                        data-dismiss="modal">取消</button>
                    <button type="button" id="" class="msg_but btn btn-success" style="width: 6rem;" data-dismiss="modal"
                        onclick="comment()">吐槽</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- 点赞 -->
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script src="t_green/jquery-3.5.1.min.js"></script>
    <script src="t_green/tx.js"></script>

    <script>
        // 保存当前说说的id
        let currentMsgId = '';
        function sayComment(msgId) {
            currentMsgId = msgId;
        }
        // 发表说说
        function saysay() {
            axios({
                method: 'post',
                url: '/say',
                data: {
                    sayMsg: $('#sayMsg').val()
                }
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 根据服务返回的信息，拿到说说的信息，借助模板引擎，渲染这一段dom
                    let data = JSON.parse(res.data);
                    let html = `
                    <div class="card border-primary shadow" style="width: 50rem;">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-10">${data.content}</div>
                                <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                    data-toggle="modal" data-target="#comment" onclick="sayComment(${data.id})">吐槽一下</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush" id="${data.id}">
                            </ul>
                        </div>
                    </div>
                `
                    // 将渲染好的这段dom，插入到指定id节点的内部最前面
                    $("#saysaymsg").prepend(html);

                    // window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
        // 吐槽一下
        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data: {
                    commentMsg: $('#commentMsg').val(),
                    msgId: currentMsgId
                },
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = res.data;
                    let html = `
                    <li class="list-group-item">
                        <blockquote class="blockquote mb-0">
                            <p>${data.content}</p>
                            <footer class="blockquote-footer">
                                <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                                <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                            </footer>
                        </blockquote>
                    </li>
                    `;

                    // 将渲染好的dom片段，插入到指定id节点的最后面
                    $("#" + data.msgId).append(html);
                } else {
                    console.log('2000判断不通过');
                }
            }).catch((err) => {
                console.log(err);
            });
        }
        // 注销登录
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
    </script>
    <!-- 点赞 -->
    <script type="text/javascript">
        function zan() {
            var number = 0;
            return function () {
                this.value = "赞(" + (++number) + ")";
            }
        }
        var zz = zan();
        document.getElementById('praise').onclick = zz;
    </script>

    <!-- 表情包 -->
    <script type="text/javascript">
        //展开表情
        $(".imgface").click(function (e) {
            $(".face").slideDown();   //向下展开
            e.stopPropagation();   //阻止冒泡
        });
        $(document).click(function () {
            $(".face").slideUp();  //向上收缩
        });
        //点击表情
        $(".face ul li").click(function () {
            var _img = $(this).find("img").clone();  //当前   img  find()   查找 找到
            $(".edit").append(_img);  //追加 
        });
        $(".msg_but").click(function () {
            var _txt = $(".edit").html();  //获取当前编辑区域的内容（包括标签）
            if (_txt == "") {
                $(".edit").focus();  //获取焦点
            }
            else {
                $(".commentMsg").append("<textarea class='form-control' id='commentMsg' rows='3'>''</textarea>");
                $(".edit").html("");
            }
        });
    </script>
</body>

</html>